<!doctype html>
<!--[if lt IE 7 ]> <html lang="ja" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="ja" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="ja" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="ja" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="ja" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>selectors 2 form について</title>
	<meta name="description" content="" />
	<meta name="author" content="Y.Nishimura@Office L / nishimuray@gmail.com" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<link rel="shortcut icon" href="/favicon.ico" />
	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

	<link rel="stylesheet" href="css/test.style.css?v=1" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/modernizr.js"></script>
	<script>!window.jQuery && document.write('<script src="js/jquery-1.6.1.js"><\/script>')</script>
	<script type="text/javascript" src="js/test.script.js"></script>
<style>
#fc {
	margin-left:2em;
	width:600px;

	-moz-column-count: 3;
	-webkit-column-count: 3;
}

#ft {
	border-collapse: collapse;
}
#ft td {
	border:solid 1px #efefef;
	padding:10px;
}

.thisis{
	color:#654321;
	background-color:#ff9999;
	border:#fff solid 3px;
	outline:#ff0000 dotted 2px;
	outline-offset:5px;
}
li.thisis{
	outline:0;
}
</style>
</head>
<body>
<p>メモ</p>
<ul>
<li><a href="http://www.w3.org/TR/html5/the-input-element.html#the-input-element">html 5 の input 要素に関する仕様</a></li>
<li><a href="http://api.jquery.com/category/selectors/">jQuery本家ドキュメントのselectorsカテゴリ</a></li>
<li><a href="http://api.jquery.com/category/selectors/form-selectors/">jQuery本家ドキュメントのselectorsカテゴリのfromカテゴリ</a></li>
</ul>

<p>formカテゴリのセレクタ</p>

<ul id="fc">
<li>:button</li>
<li>:checkbox</li>
<li>:checked</li>
<li>:disabled</li>
<li>:enabled</li>
<li>:file</li>
<li>:focus</li>
<li>:image</li>
<li>:input</li>
<li>:password</li>
<li>:radio</li>
<li>:reset</li>
<li>:selected</li>
<li>:submit</li>
<li>:text</li>
</ul>

<p>:focusは要素をクリック。</p>

<table id="ft">
<tr>
<td><input type="button" value="button-1" /></td>
<td><input type="button" value="button-c" checked="checked" /></td>
<td><input type="button" value="button-d" disabled="disabled" /></td>
<td><input type="button" value="button-r" readonly /></td>
</tr><tr>
<td><input type="checkbox" value="cb-1" name="cb" />cb-1 </td>
<td><input type="checkbox" value="cb-c" name="cb" checked="checked" />cb-c </td>
<td><input type="checkbox" value="cb-d" name="cb" disabled="disabled" />cb-d </td>
<td><input type="checkbox" value="cb-r" name="cb" readonly />cb-r </td>
</tr><tr>
<td><input type="file" value="file-1" /></td>
<td><input type="file" value="file-c" checked="checked" /></td>
<td><input type="file" value="file-d" disabled="disabled" /></td>
<td><input type="file" value="file-r" readonly /></td>
</tr><tr>
<td><input type="image" value="image-1" /></td>
<td><input type="image" value="image-c" checked="checked" /></td>
<td><input type="image" value="image-d" disabled="disabled" /></td>
<td><input type="image" value="image-r" readonly /></td>
</tr><tr>
<td><input type="password" value="password-1" /></td>
<td><input type="password" value="password-c" checked="checked" /></td>
<td><input type="password" value="password-d" disabled="disabled" /></td>
<td><input type="password" value="password-r" readonly /></td>
</tr><tr>
<td><input type="radio" value="radio-1" name="radio" />radio-1 </td>
<td><input type="radio" value="radio-c" name="radio" checked="checked" />radio-c </td>
<td><input type="radio" value="radio-d" name="radio" disabled="disabled" />radio-d </td>
<td><input type="radio" value="radio-r" name="radio" readonly />radio-r </td>
</tr><tr>
<td><input type="reset" value="reset-1" /></td>
<td><input type="reset" value="reset-c" checked="checked" /></td>
<td><input type="reset" value="reset-d" disabled="disabled" /></td>
<td><input type="reset" value="reset-r" readonly /></td>
</tr><tr>
<td><select><option>select-1</option></select></td>
<td><select checked="checked"><option>select-c</option></select></td>
<td><select disabled="disabled"><option>select-d</option></select></td>
<td><select readonly><option>select-r</option></select></td>
<td><select size="3"><option selected="selected">select-s</option><option>2</option><option>3</option></select></td>
</tr><tr>
<td><input type="submit" value="submit-1" /></td>
<td><input type="submit" value="submit-c" checked="checked" /></td>
<td><input type="submit" value="submit-d" disabled="disabled" /></td>
<td><input type="submit" value="submit-r" readonly /></td>
</tr><tr>
<td><input type="text" value="text-1" /></td>
<td><input type="text" value="text-c" checked="checked" /></td>
<td><input type="text" value="text-d" disabled="disabled" /></td>
<td><input type="text" value="text-r" readonly /></td>
</tr>
</table>



<script type="text/javascript">
<!-- 
$(function() {

	$("#fc li").click(function(){
		$(".thisis").removeClass("thisis");
		$($(this).text()).addClass("thisis");
		$(this).addClass("thisis");
	});

	// :focus
	$("input").focus(function(){
		$(this).addClass("thisis");
		$("li:contains(:focus)").click();
	});
	$("input").blur(function(){
		$(this).removeClass("thisis");
	});

});
// -->
</script>

</body>
</html>
